<template>
  <div id="index">
    <div class="Info">
      <!-- 侧边导航栏 -->
      <div class="Nav">
        <el-row class="tac">
          <el-col>
            <el-menu
              default-active="1-1"
              :default-openeds="openeds"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <div class="innerLogo">
                <img src="../assets/Logo.jpg" />
                <span>后台管理</span>
              </div>
              <el-submenu index="1">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>影视管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item @click="gotoFilmList()" index="1-1"
                    >电影列表</el-menu-item
                  >
                  <el-menu-item @click="gotoArrangement()" index="1-2"
                    >院线排片</el-menu-item
                  >
                  <el-menu-item @click="gotoaddFilm()" index="1-3"
                    >新增电影</el-menu-item
                  >
                  <el-menu-item @click="gotoCarousel()" index="1-4"
                    >轮播海报</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>用户管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item @click="gotoUserList" index="2-1"
                    >用户列表</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>订单管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item @click="gotoOrderList()" index="3-1"
                    >订单列表</el-menu-item
                  >
                  <el-menu-item @click="gotoErrList()" index="3-2"
                    >异常订单</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-location"></i>
                  <span>员工管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item @click="gotoEmpList()" index="4-1"
                    >员工列表</el-menu-item
                  >
                  <el-menu-item @click="gotoEmpAdd()" index="4-2"
                    >新增员工</el-menu-item
                  >
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
      <!-- 右侧显示页面 -->
      <div class="viewInfo">
        <div class="header">
          <el-dropdown placement="bottom">
            <span> {{ admin.username }} </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="gotoBaseset()"
                >个人设置</el-dropdown-item
              >
              <el-dropdown-item @click.native="quit()"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <img :src="admin.avatar" alt="" />
        </div>
        <div class="view"><router-view /></div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAdminInfo } from "@/api/admin.js";
export default {
  name: "index",
  data() {
    return {
      openeds: ["1", "2", "3", "4"],
      id: "",
      admin: {
        id: "",
        username: "",
        password: "",
        avatar: "",
      },
    };
  },
  methods: {
    isLogin: function () {
      if (localStorage.getItem("token") == null) {
        this.$router.push({
          path: "/Login",
        });
      }
    },
    getInfo: function () {
      getAdminInfo(localStorage.getItem("id")).then((res) => {
        if (res.code === 200) {
          this.admin = res.data;
        } else {
        }
      });
    },
    // 跳转到电影列表
    gotoFilmList: function () {
      if (window.location.pathname != "/index/filmList") {
        this.$router.push({ path: "/index/filmList" });
      }
    },
    // 跳转到院线排片
    gotoArrangement: function () {
      if (window.location.pathname != "/index/filmArrangement") {
        this.$router.push({ path: "/index/filmArrangement" });
      }
    },
    // 跳转到新增电影
    gotoaddFilm: function () {
      if (window.location.pathname != "/index/addFilm") {
        this.$router.push({ path: "/index/addFilm" });
      }
    },
    // 跳转到轮播海报
    gotoCarousel: function () {
      if (window.location.pathname != "/index/filmCarousel") {
        this.$router.push({
          path: "/index/filmCarousel",
        });
      }
    },
    // 跳转到用户列表
    gotoUserList: function () {
      if (window.location.pathname != "/index/userList") {
        this.$router.push({
          path: "/index/userList",
        });
      }
    },
    // 跳转到订单列表
    gotoOrderList: function () {
      if (window.location.pathname != "/index/orderList") {
        this.$router.push({
          path: "/index/orderList",
        });
      }
    },
    // 跳转到异常订单
    gotoErrList: function () {
      if (window.location.pathname != "/index/errorOrder") {
        this.$router.push({
          path: "/index/errorOrder",
        });
      }
    },
    // 跳转到员工列表
    gotoEmpList: function () {
      if (window.location.pathname != "/index/empList") {
        this.$router.push({
          path: "/index/empList",
        });
      }
    },
    // 跳转到新增员工列表
    gotoEmpAdd: function () {
      if (window.location.pathname != "/index/empAdd") {
        this.$router.push({
          path: "/index/empAdd",
        });
      }
    },
    // 跳转到个人设置
    gotoBaseset: function () {
      if (window.location.pathname != "/index/baseSetting") {
        this.$router.push({
          path: "/index/baseSetting",
          query: {
            id: this.admin.id,
            username: this.admin.username,
            avatar: this.admin.avatar,
          },
        });
      }
    },
    // 退出登录
    quit: function () {
      localStorage.removeItem("token");
      localStorage.removeItem("id");
      this.$router.push({
        path: "/Login",
      });
    },
  },
  mounted() {
    this.isLogin();
    this.getInfo();
  },
};
</script>

<style lang="less" scoped>
#index {
  width: 100%;
  .Info {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    .Nav {
      width: 210px;
      .innerLogo {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 10px;
        align-items: center;
        img {
          width: 36px;
        }
        span {
          margin-left: 10px;
          font-size: 18px;
          color: #d7d7d7;
        }
      }
    }
    .viewInfo {
      width: 990px;
      display: flex;
      flex-direction: column;
      .header {
        height: 62px;
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
        align-items: center;
        .el-dropdown-menu {
          margin-right: 50px;
        }
        img {
          margin-right: 20px;
          width: 35px;
          height: 35px;
          border-radius: 50%;
        }
        span {
          font-size: 16px;
          display: inline-block;
        }
      }
      .view {
        height: 770px;
        width: 100%;
        overflow: auto;
      }
    }
  }
}
</style>